<template>
  <div class="login">
    <div class="box text-center">
      <h3>登录</h3>
      <el-input placeholder="请输入内容" v-model="username" clearable>
      </el-input>
      <el-input
        placeholder="请输入密码"
        v-model="password"
        show-password
      ></el-input>
      <el-button round @click="login">登录</el-button>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { requserlogin } from "../../http/api";
import { successAlert } from '../../utils/alert';
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    ...mapActions({
      changeUserInfo:"changeUserInfo"
    }),
    login() {
      requserlogin({ username: this.username, password: this.password }).then(
        (res) => {
          if (res.data.code == 200) {
            this.changeUserInfo(res.data.list)
            successAlert(res.data.msg)
            /*  要存到仓库
                要存到本地
                要跳转页面 */
            this.$router.push("/")
          }
        }
      );
    },
  },
};
</script>

<style scoped lang="less">
@import "../../less/index.less";
.login {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right, @light, @primary);
}
.box {
  width: 350px;
  background: #fff;
  border-radius: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
}
.el-input {
  margin-top: @margin;
}
.el-button {
  margin-top: @margin;
  width: 100%;
  background: @light;
  color: #fff;
}
</style>